<template>
  <div>
    <div v-for="item in configs">
      <el-tooltip
        :raw-content="true"
        :content="`<div style='width:400px;height:700px;background-size:cover;background-image:url(${item.img})'></div>`"
        placement="left"
        :teleported="false"
      >
        <el-link :href="`${item.url}`" target="_blank">
          <p class="my-[6px]">{{ item.name }}</p>
        </el-link>
      </el-tooltip>
    </div>
  </div>
</template>

<script lang="ts" setup>
const configs = [
  {
    name: "超时空战士吧 官方一群（主要讨论）",
    url: "https://qm.qq.com/q/B7BJMPVvVe",
    img: "/QQGroup/group_1.jpg",
  },
  {
    name: "超时空战士吧 官方二群（Star Defenders）",
    url: "https://qm.qq.com/q/pTRuFHX3Ms",
    img: "/QQGroup/group_2.jpg",
  },
  {
    name: "超时空战士吧 滑稽三群（其他游戏）",
    url: "https://qm.qq.com/q/E9Y4aw55gO",
    img: "/QQGroup/group_3.jpg",
  },
];
</script>
<style scoped>
:deep(.el-popper){
  padding: 0;
}
</style>
